import React from "react"
import { AlignRightOutlined, UserOutlined } from '@ant-design/icons';
import { Divider, Tag, Tooltip } from "antd";
import RequestUsers from "./users"

// <AlignRightOutlined />
const columns = ({onDel, onView}) => [
	{
		title: '',
		dataIndex: 'id',
		width: 60,
		render: (_, __, index) => <span className={'table-index'}> {index + 1}</span>
	},
	{
		title: '服装编号',
		dataIndex: 'clothingCode',
		key: 'clothingCode',
		width: 150,
		render: (i, row) => {
			return <a onClick={() => onView(row)}>{i}</a>
		}
	}, {
		title: '标题',
		dataIndex: 'clothingTitle',
		key: 'clothingTitle',
		width: 160,
		render: (a) => {
			return <Tooltip placement="right" title={a}>
				<div className={'clothing-td-title'}>{a}</div>
			</Tooltip>
		}
	}, {
		title: '请求次数',
		dataIndex: 'requestCount',
		key: 'requestCount',
		width: 100,
		sorter: true,
		render: (r) => {
			let color = '#2196F3'
			if (r > 50) {
				color = '#f50'
			}
			return <Tag color={color}><UserOutlined /> <b>{r}</b></Tag>;
		}
	}, {
		title: '类别',
		dataIndex: 'clothingType',
		key: 'clothingType',
		width: 150
	}, {
		title: '请求用户',
		dataIndex: 'requestUsers',
		key: 'requestUsers',
		render: (r) => {
			return <RequestUsers users={r}/>
		}
	}, {
		title: '操作',
		width: 150,
		key: 'action',
		render: (a, row) => {
			return (
				<div>
					<div>
						<a onClick={() => onView(row)}>查看</a>
						<Divider type="vertical"/>
						<a>分配</a>
					</div>
				</div>
			)
		}
	}]

export default columns